<!--<link rel="stylesheet" href="<?php echo STATIC_DOMAIN ?>skins/admin/jquery-ui-1.8.23.custom.css"/>-->
<style>
    .content{min-height: 150px}
    .threecolumn_each ul li:hover{color:green;font-weight: bold;cursor: pointer}
    .drop-active{border:1px solid red}
    .drop-hover{border:1px solid yellow}
    .catDrop .remove{padding-left: 7px}
</style>
<script>
    $(function() {
        $( "#catDrag li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        
        $(".catDrop" ).droppable({
            activeClass: "drop-active",
            hoverClass: "drop-hover",
            accept: "li.cat-drop-accept",
            drop: function( event, ui ) {
                var idDropObj = $(this).attr('id');
                var idDragObj = ui.draggable.attr('id');
                if($("#" + idDropObj + " li#" + idDragObj).length != 0) {
                    alert("Chỉ mục đã có, xin vui lòng chọn chỉ mục khác!");
                    return false;
                }
                
                if(idDropObj == 'lstMenubar' && $("#" + idDropObj + " li").length == 7) {
                    alert("Chỉ cho phép nhiều nhất 7 chỉ mục, xin vui lòng thử lại");
                    return false;
                }
                
                if(idDropObj == 'lstBoxHome' && $("#" + idDropObj + " li").length == 4) {
                    alert("Chỉ cho phép nhiều nhất 4 chỉ mục, xin vui lòng thử lại");
                    return false;
                }
                
                if(idDropObj == 'lstColumnRight' && $("#" + idDropObj + " li").length == 4) {
                    alert("Chỉ cho phép nhiều nhất 4 chỉ mục, xin vui lòng thử lại");
                    return false;
                }
                
                $("<li id='" + idDragObj + "' class='cat-remove-accept'></li>").text(ui.draggable.text()).append(' - <a href="#" class="remove">Xóa</a>').appendTo(this);
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                
            }
        });
        
        $("#accept").click(function(){
            var _lstMenubar = $("#lstMenubar").sortable('toArray');
            var _lstBoxHome = $("#lstBoxHome").sortable('toArray');
            var _lstColumnRight = $("#lstColumnRight").sortable('toArray');
            
            var lstMenubar = _lstMenubar.toString();
            var lstBoxHome = _lstBoxHome.toString();
            var lstColumnRight = _lstColumnRight.toString();
            
            $.ajax({
                url : base_url + 'admin/setting',
                type : 'POST',
                data : 'lstMenubar='+lstMenubar+'&lstBoxHome='+lstBoxHome+'&lstColumnRight='+lstColumnRight,
                success : function(html) {
                    $(".alert_info").find('span').html(html);
                    $(".alert_info").show();
                }
            });
        });
        
        $(".catDrop .remove").live('click', function() {
            var idDropObj = $(this).parent('ul').attr('id');
            $(this).parent().remove();
            $("#"+idDropObj).sortable();
            return false;
        });
    });
</script>
<div class="inner">
    <div class="onecolumn">
        <div class="header">
            <span>Tùy chỉnh giao diện trang chủ</span>
        </div>
        <br class="clear"/>
        <div class="content">
            <div class="alert_info" style="display: none">
                <p>
                    <img src="<?php echo STATIC_DOMAIN ?>images/admin/icon_info.png" alt="success" class="mid_align"/>
                    <span></span>
                </p>
            </div>
            <br class="clear"/>
            <h4>Thay đổi các chỉ mục tại menubar và các box trên trang chủ</h4>
            <p>
                Bạn có thể thay đổi các chỉ mục tại menubar hoặc các box trên trang chủ bằng cách kéo các chỉ mục trong cột "Các chỉ mục hiện có" sang bên các cột "Tùy chỉnh menubar" hoặc "Tùy chỉnh các box trang chủ"
            </p>
            <br/>
            <p>
                <input type="button" id="accept" value="Xác nhận"/>
            </p>
            <div id="threecolumn" class="threecolumn">
                <div class="threecolumn_each">
                    <div class="header">
                        <span>Tùy chỉnh menubar</span>
                    </div>
                    <br class="clear"/>
                    <ul style="list-style: decimal;padding:30px" class="catDrop" id="lstMenubar">
                        <?php foreach($lstMenubar as $menubar): ?>
	                        <?php if($menubar['info']): ?>
	                            <li id="<?php echo $menubar['info']['id'] ?>"><?php echo $menubar['info']['name_vn'] ?> - <a href="#" class="remove">Xóa</a></li>
	                        <?php endif; ?>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <div class="threecolumn_each">
                    <div class="header">
                        <span>Tùy chỉnh các box bên trái</span>
                    </div>
                    <br class="clear"/>
                    <ul style="list-style: decimal;padding:30px" class="catDrop" id="lstColumnRight">
                        <?php foreach($lstColumnRight as $box): ?>
	                        <?php if($box['info']): ?>
	                            <li id="<?php echo $box['info']['id'] ?>"><?php echo $box['info']['name_vn'] ?> - <a href="#" class="remove">Xóa</a></li>
	                        <?php endif; ?>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <div class="threecolumn_each">
                    <div class="header">
                        <span>Tùy chỉnh trang chủ</span>
                    </div>
                    <br class="clear"/>
                    <ul style="list-style: decimal;padding:30px" class="catDrop" id="lstBoxHome">
                        <?php foreach($lstMenubar as $menubar): ?>
	                        <?php if($menubar['info']): ?>
	                            <li id="<?php echo $menubar['info']['id'] ?>"><?php echo $menubar['info']['name_vn'] ?> - <a href="#" class="remove">Xóa</a></li>
	                        <?php endif; ?>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <div class="threecolumn_each">
                    <div class="header">
                        <span>Các chỉ mục hiện có</span>
                    </div>
                    <br class="clear"/>
                    <ul style="list-style: decimal;padding:30px" id="catDrag">
                        <?php foreach($category as $cat): ?>
	                        <?php if($cat && $cat['parent_id'] == 0): ?>
	                            <li class="cat-drop-accept" id="<?php echo $cat['id'] ?>"><?php echo $cat['name_vn'] ?>
	                            	<?php if($cat['child'] && count($cat['child'])>0): ?> +
	                            	<?php endif; ?>
	                            	
	                            </li>
                            	
                            	<?php if($cat['child'] && count($cat['child'])>0): ?>
                            		<ul style="padding-left: 50px;">
                            			
                            			<?php foreach ($cat['child'] as $k => $val): ?>
											<li class="cat-drop-accept" id="<?php echo $val['id'] ?>"><?php echo $val['name_vn']; ?></li>
										<?php endforeach; ?>
                            			
                            				
                            		</ul>	
                            	<?php endif; ?>
	                            	
	                            	
	                            
	                        <?php endif; ?>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
            
        </div>
    </div>
</div>